import React, { useEffect, useState } from "react";
import { useRequest, useBoolean } from "ahooks";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import { getHttp } from "../../../api/index";
import { useAppSelector } from "../../../store/hooks";
import { useDispatch } from "react-redux";
import { Empty, Button } from "react-vant";
import { getTimeFromDate } from "../../../../src/utils/formatTime";
import { List } from "react-vant";
import { addrecordId } from "../../../features/recordId/doctorDetailSlice";
import LeftArraw from "../LeftArraw";

// 定义问诊信息接口
interface IConsultationInfo {
  userId: number;
  recordId: number;
  userHeadPic: string;
  nickName: string;
  jobTitle: string;
  department: string;
  inquiryTime: string;
  status: number;
}

const Index: React.FC = () => {
  const userId = useAppSelector((state) => state.user.doctor.userName);
  const sessionId = useAppSelector((state) => state.user.doctor.sessionId);
  const [consultationInfo, setConsultationInfo] = useState<IConsultationInfo[]>(
    []
  );
  const navigate = useNavigate();
  const dispatch = useDispatch();
  // 跳转到咨询
  const handleRecordClick = (info: IConsultationInfo) => {
    console.log(info)
    // userId
    // nickName
    // recordId
    navigate(`/consultation/chat?userId=${info.userId}&nickName=${info.nickName}&recordId=${info.recordId}&type=2`);
  };
  // 判断是否评价更换路由
  const handleCommentClick = (info: IConsultationInfo) => {
    dispatch(addrecordId(info.recordId));
    navigate("/consultation/comment");
  };
  // 调用查看历史评价接口
  const [finish, { setTrue, setFalse }] = useBoolean(false);
  const count = 5;
  const [page, setPage] = useState(1);
  const mergeInfoListData = async () => {
    const resp = await getHttp(
      "/health/doctor/inquiry/verify/v1/findHistoryInquiryRecord",
      { page: page, count: count },
      { userId: userId, sessionId: sessionId }
    );
    // 是否存在更多数据
    console.log(resp.result);

    if (resp.result.length > 0) {
      if (page == 1) {
        // 数据不合并
        setConsultationInfo(resp.result);
        console.log("数据不合并");
      } else {
        // 请求非第一页， 请求合并
        console.log("请求非第一页， 请求合并");
        setConsultationInfo([...consultationInfo, ...resp.result]);
      }
      // 下一次请求页码 + 1
      setPage(page + 1);
    } else {
      // 请求完成 没有更多数据
      console.log("请求完成 没有更多数据");

      setTrue();
    }
    console.log(resp);
  };
  useEffect(() => {
    setFalse();

    mergeInfoListData();
  }, [userId, sessionId]);
  return (
    <div>
      <LeftArraw title="历史问诊" />

      {consultationInfo.length > 0 ? (
        <List
          finished={finish}
          onLoad={mergeInfoListData}
          finishedText="没有更多数据了"
        >
          <div className={style.container}>
            {consultationInfo.map((info) => (
              <div className={style.div} key={info.recordId} >
                <dl className={style.card}>
                  <dt onClick={()=> navigate(`/consultation/patient/${info.userId}`)}>
                    <img src={info.userHeadPic} alt="" />
                  </dt>
                  <dd>
                    <div className={style.title}>
                      <h3>
                        问诊人:
                        <span>{info.nickName}</span>
                      </h3>
                      <p>
                        问诊时间
                        <span></span>
                        {getTimeFromDate(Number(new Date(info.inquiryTime)))}
                      </p>
                    </div>
                    <div className={style.btn}>
                      <button
                        className={style.btn1}
                        onClick={() => handleRecordClick(info)}
                      >
                        查看问诊记录
                      </button>
                      {info.status === 1 ? (
                        <p>暂无评价</p>
                      ) : (
                        <button
                          className={style.btn2}
                          onClick={() => handleCommentClick(info)}
                        >
                          查看评价
                        </button>
                      )}
                    </div>
                  </dd>
                </dl>
              </div>
            ))}
          </div>
        </List>
      ) : (
        <div>
          <Empty description="暂无问诊">
            <Button
              style={{ width: 160 }}
              round
              type="primary"
              onClick={() => navigate("/my")}
            >
              返回
            </Button>
          </Empty>
        </div>
      )}
    </div>
  );
};

export default Index;
